// 引入Count的UI组件
import CountUI from "../../component/Count";
// 引入connent用于连接UI组件与redux
import {connect} from 'react-redux'
import {createIncrementAction, createDecrementAction, createIncrementAsyncAction} from '../../redux/count_action'

// 1. mapStateToProps函数返回的是一个对象
// 2. 返回的对象中的key就作为传递给UI组件props的key，value就是作为传递给UI组件props的value
// 3. mapStateToProps用于传递状态
function mapStateToProps(state) {
    return {count: state}
}

// 1. mapDispatchToProps函数返回的是一个对象
// 2. 返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
// 3. mapStateToProps用于传递操作状态的方法
function mapDispatchToProps(dispatch) {
    return {
        Increment: (value) => {
            dispatch(createIncrementAction(value))
        },
        Decrement: (value) => {
            dispatch(createDecrementAction(value))
        },
        IncrementAsync: (value, time) => {
            dispatch(createIncrementAsyncAction(value, time))
        }
    }
}

const CountContainer = connect(mapStateToProps, mapDispatchToProps)(CountUI)

export default CountContainer